今天想要來整理一下清除浮動 float 的方式，
只要有使用到 float，腦袋一定要自動聯想到清除浮動，
他們兩個就是這麼密不可分～

1. clearfix

在浮動物件的下方加上一個 class 名為 clearfix 的 div，並且設定他 clear: both（絕對不是只要命名對就可以清除浮動，記得要設定 css 啊）

HTML

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="clearfix"></div>
</div>

CSS

.wrap{
  padding: 20px;
  background-color: #aaa;
}

.box {
  width: 200px;
  height: 200px;
  background-color: teal;
  float: left;
}

.clearfix{
  width: 0;
  height: 0;
  clear: both;
}

2. 父層::after

不想要在 HTML 結構上加上空的 div 的話，::after 會是一個很不錯的用法

HTML

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.wrap{
  padding: 20px;
  background-color: #aaa;
}

.wrap::after{
  content:'';
  display: block;
  height: 0;
  clear: both;
}

.box {
  width: 200px;
  height: 200px;
  background-color: teal;
  float: left;
}

3. 神奇的 overflow: hidden

這個我自己覺得滿玄的，在父層容器上設定 overflow: hidden，
為了要去抓出這父層佔了多少空間，浮動物件的空間就會被計算進去。

HTML 長得跟上一個一模一樣，我就不再放了，
CSS

.wrap{
  padding: 20px;
  background-color: #aaa;
  overflow: hidden;
}

.box {
  width: 200px;
  height: 200px;
  background-color: teal;
  float: left;
}

這幾種都可以學起來，
以後看到別人做這樣設定的時候，
就不會滿頭問號想說幹嘛要這樣設定。

今天就講到這裡啦～
我們明天見。